import React, {Component} from 'react';
import {Drawer, Layout} from 'antd';
import LeftNav from "../../components/LeftNav/LeftNav";
import TopHeader from "../../components/TopHeader/TopHeader";
import {Route} from 'react-router-dom';
import Home from "../home";
import Books from "../books";
import BookCategory from "../books/categories";
import BookInfo from "../books/infos";
import BookMessage from "../books/messages";
import HotBook from "../books/hot";
import BookLatest from "../books/latest";
import BookDetail from "../books/detail/book_detail";
import BookInfoDetail from "../books/detail/infos/info_detail";
import BookMessageDetail from "../books/detail/messages/message_detail";
import ImageDetail from "../images/detail";
import Images from "../images";
import Users from "../users";
import MovieList from '../movies';
import MovieDetail from "../movies/detail";
import NowPlaying from "../movies/now-playing";
import SpiderTasks from "../tasks/spider";
import TaskLog from "../tasks/log"
import {NotFound} from '../error/404';
import UserCenter from '../users/user';
import './index.less';
import MediaQuery from 'react-responsive';
import store from 'store';

import CacheRoute, {CacheSwitch} from 'react-router-cache-route'

const {Header, Sider, Content} = Layout;

export default class Admin extends Component {
  m = false;
  state = {
    collapsed: false, // 是否折叠slider
    placement: 'left', // 抽屉的方向left
  }
  // 处理媒体查询的回调
  handleMediaQueryChange = (matches) => { // bool
    if (matches === false) {
      this.setState({collapsed: false})
    }
  }

  // 从子节点接收 数据
  toggle = (collapsed) => {
    this.setState({
      collapsed
    })
  }
  // 关闭抽屉
  onClose = () => {
    this.setState({
      collapsed: false
    })
  }

  render() {
    const {collapsed, placement} = this.state;
    const user = store.get('user');
    const token = store.get('token');
    // 没有user或者token 就跳转到登录页
    if (!token || !user) {
      this.props.history.replace('/admin/login');
    }
    const customSwitch = (
      <CacheSwitch>
        <Route path='/admin' component={Home} exact/>
        <CacheRoute path='/admin/books/list' component={Books} exact/>
        <Route path='/admin/books/list/book/:id' component={BookDetail}/>
        <Route path='/admin/books/latest' component={BookLatest}/>
        <CacheRoute path='/admin/books/infos' component={BookInfo} exact/>
        <Route path='/admin/books/infos/:id' component={BookInfoDetail}/>
        <CacheRoute path='/admin/books/messages' component={BookMessage} exact/>
        <Route path='/admin/books/messages/:id' component={BookMessageDetail}/>
        <CacheRoute path='/admin/books/categories' component={BookCategory}/>
        <Route path='/admin/books/hot' component={HotBook}/>
        <CacheRoute path='/admin/pictures' component={Images} exact/>
        <Route path='/admin/pictures/:id' component={ImageDetail}/>
        <Route path='/admin/users/list' component={Users}/>
        <Route path='/admin/user' component={UserCenter}/>
        <CacheRoute path='/admin/movies/list' component={MovieList} exact/>
        <Route path='/admin/movies/list/movie/:id' component={MovieDetail}/>
        <Route path='/admin/movies/now-playing' component={NowPlaying}/>
        <CacheRoute path='/admin/tasks/spider' component={SpiderTasks}/>
        <Route path='/admin/tasks/log' component={TaskLog}/>
        <Route Switch component={NotFound}/>
      </CacheSwitch>
    )

    return (
      <Layout style={{height: '100%'}}>
        <Header style={{padding: '0'}} className='header-bg'>
          <TopHeader toggle={this.toggle} collapsed={collapsed}/>
        </Header>
        <Layout>
          {/*mobile*/}
          <MediaQuery maxDeviceWidth={576} onChange={this.handleMediaQueryChange} type='screen'>
            <Drawer
              bodyStyle={{padding: 0}}
              title="导航栏"
              placement={placement}
              closable={false}
              onClose={this.onClose}
              visible={collapsed}
              key={placement}
            >
              <LeftNav/>
            </Drawer>
            <Content>
              {customSwitch}
            </Content>
          </MediaQuery>
          {/*PC*/}
          <MediaQuery minDeviceWidth={577} onChange={this.handleMediaQueryChange}>
            <Sider collapsed={collapsed}>
              <LeftNav collapsed={collapsed}/>
            </Sider>
            <Content style={{padding: '20px'}}>
              {customSwitch}
            </Content>
          </MediaQuery>
        </Layout>
      </Layout>
    )
  }
}
